@page "/drone2"
@using System.Collections

@inject HttpClient http

<div class="container border border-3 rounded">

    <div class="d-flex justify-content-center">
        <div class="col-md-3">
            <div class="form-group">
                <input type="button" class="btn btn-success" value="Drone Control Panel" />
            </div>
        </div>
    </div>
    <br>
    <div class="justify-content-center">
        <br>
        <div class="d-flex justify-content-center">
            <RadzenButton
                style="width: 180px; height:60px; border: 2px solid #ff6d41;background-color:#ff6d41; margin-right: 5px; margin-left:5px;"
                IsBusy=@busy Click=@Connect>
                <img src="images/drone_connect.png" height="50" width="40" />
            </RadzenButton>
            <RadzenButton
                style="width: 180px; height:60px; border: 2px solid #479cc8;background-color:#479cc8; margin-right: 5px; margin-left:5px;"
                IsBusy=@busy Click=@TakeOff Text="Take Off">
                <img src="images/drone_takeoff.png" height="50" width="40" />
            </RadzenButton>
            <RadzenButton
                style="width: 180px; height:60px; border: 2px solid #e6c54f;background-color:#e6c54f; margin-right: 5px; margin-left:5px;"
                IsBusy=@busy Click=@Land>
                <img src="images/drone_landing.png" height="50" width="40" />
            </RadzenButton>
        </div>
        <div class="justify-content-center">
            <img src="images/drone.png" alt="" style="display:block; margin:auto;" width="250" height="200">
        </div>
        <br>
        <div class="d-flex justify-content-center">
            <RadzenButton
                style="width: 180px; height:60px;border: 4px solid #00DABD; background-color:#00DABD; margin-right: 5px; margin-left:5px;"
                IsBusy=@busy Click=@MoveLeft>
                <img src="images/drone-left.png" height="50" width="40" />
            </RadzenButton>
            <RadzenButton
                style="width: 180px; height:60px;border: 4px solid #00DABD; background-color:#00DABD; margin-right: 5px; margin-left:5px;"
                IsBusy=@busy Click=@Up>
                <img src="images/up.png" height="50" width="40" />
            </RadzenButton>
            <RadzenButton
                style="width: 180px; height:60px;border: 4px solid #00DABD; background-color:#00DABD; margin-right: 5px; margin-left:5px;"
                IsBusy=@busy Click=@Down>
                <img src="images/down.png" height="50" width="40" />
            </RadzenButton>
            <RadzenButton
                style="width: 180px; height:60px;border: 4px solid #00DABD; background-color:#00DABD; margin-right: 5px; margin-left:5px;"
                IsBusy=@busy Click=@MoveRight>
                <img src="images/drone-right.png" height="50" width="40" />
            </RadzenButton>
        </div>
        <br>
        <div class="d-flex justify-content-center">
            <RadzenButton
                style="width: 180px; height:60px;border: 4px solid #00DABD; background-color:#00DABD; margin-right: 5px; margin-left:5px;"
                IsBusy=@busy Click=@TurnCounterClockWise>
                <img src="images/counter-clockwise.png" height="50" width="40" />
            </RadzenButton>
            <RadzenButton
                style="width: 180px; height:60px;border: 4px solid #00DABD; background-color:#00DABD; margin-right: 5px; margin-left:5px;"
                IsBusy=@busy Click=@Forward>
                <img src="images/forward.png" height="50" width="40" />
            </RadzenButton>
            <RadzenButton
                style="width: 180px; height:60px;border: 4px solid #00DABD; background-color:#00DABD; margin-right: 5px; margin-left:5px;"
                IsBusy=@busy Click=@Reverse>
                <img src="images/reverse.png" height="50" width="40" />
            </RadzenButton>
            <RadzenButton
                style="width: 180px; height:60px;border: 4px solid #00DABD; background-color:#00DABD; margin-right: 5px; margin-left:5px;"
                IsBusy=@busy Click=@TurnClockWise>
                <img src="images/clockwise.png" height="50" width="40" />
            </RadzenButton>
        </div>
    </div>
    <br>
</div>


@code {

    void OnChange(dynamic value, string name)
    {
        var str = value is IEnumerable ? string.Join(", ", value) : value;
        Console.WriteLine(str);
    }
    bool busy;
    protected async Task Up()
    {
        busy = true;
        var result = await http.GetAsync("/Drone/MoveUp");
        busy = false;
    }
    protected async Task Down()
    {
        busy = true;
        var result = await http.GetAsync("/Drone/MoveDown");
        busy = false;
    }
    protected async Task Forward()
    {
        busy = true;
        var result = await http.GetAsync("/Drone/Forward");
        busy = false;
    }
    protected async Task MoveRight()
    {
        busy = true;
        var result = await http.GetAsync("/Drone/MoveRight");
        busy = false;
    }
    protected async Task MoveLeft()
    {
        busy = true;
        var result = await http.GetAsync("/Drone/MoveLeft");
        busy = false;
    }
    protected async Task Reverse()
    {
        busy = true;
        var result = await http.GetAsync("/Drone/Reverse");
        busy = false;
    }
    protected async Task TurnClockWise()
    {
        busy = true;
        var result = await http.GetAsync("/Drone/TurnClockWise");
        busy = false;
    }
    protected async Task TurnCounterClockWise()
    {
        busy = true;
        var result = await http.GetAsync("/Drone/TurnCounterClockWise");
        busy = false;
    }
    protected async Task Connect()
    {
        busy = true;
        var result = await http.GetAsync("/Drone/Connect");
        busy = false;
    }
    protected async Task TakeOff()
    {
        busy = true;
        var result = await http.GetAsync("/Drone/TakeOff");
        busy = false;
    }
    protected async Task Land()
    {
        busy = true;
        var result = await http.GetAsync("/Drone/Land");
        busy = false;
    }

}